<template>
  <div>
    <div class="settings-view">
      <div class="main-container">
        <div class="settings-box">
          <div class="setting-item">
            <h3 class="item-title">基本資訊</h3>
            <div class="item-operation">
              <el-button type="primary" icon="el-icon-plus" @click="addPersonalInformation()">添加基本資訊</el-button>
            </div>
          </div>
          <div class="setting-item">
            <h3 class="item-title">身分驗證</h3>
            <div class="item-text">請先完成「基本資訊」。</div>
          </div>
          <div class="setting-item">
            <h3 class="item-title">手機</h3>
            <div class="item-text">啟用雙重驗證帳戶</div>
            <div class="item-operation">
              <el-button type="primary" icon="el-icon-plus">驗證手機</el-button>
            </div>
          </div>
          <div class="setting-item">
            <h3 class="item-title">賣單匯款銀行帳戶</h3>
            <div class="item-text">用來賣出您的比特幣</div>
            <div class="item-operation">
              <el-button type="primary" icon="el-icon-plus">綁定銀行帳戶</el-button>
            </div>
          </div>
          <div class="setting-item">
            <h3 class="item-title">買單匯款銀行帳戶</h3>
            <div class="item-text">您尚未有買單匯款銀行帳戶。購買<router-link to="/buy/btc">比特幣</router-link>以取得您的買單匯款銀行帳戶。</div>
          </div>
          <div class="setting-item">
            <h3 class="item-title">郵件通知設定</h3>
            <div class="item-operation-toggle">
              <div class="toggle-item">
                偶爾接收來自 MaiCoin 的活動通知郵件
                <el-switch v-model="email_newsletter"></el-switch>
              </div>
              <div class="toggle-item">
                當帳號成功登入時，接收郵件通知
                <el-switch v-model="email_login"></el-switch>
              </div>
              <div class="toggle-item">
                當發送、接收或支付比特幣時，接收郵件通知
                <el-switch v-model="email_transaction"></el-switch>
              </div>
              <div class="toggle-item">
                當購買比特幣時，接收郵件通知
                <el-switch v-model="email_order"></el-switch>
              </div>
            </div>
          </div>
          <div class="setting-item">
            <h3 class="item-title">電子發票載具設定</h3>
            <div class="item-operation">
              <el-button type="primary" icon="el-icon-plus">新增電子發票設定</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      email_newsletter: false,
      email_login: true,
      email_transaction: false,
      email_order: true
    }
  },
  methods: {
    addPersonalInformation () {
      this.$router.push('/main/personalInformationAdd')
    }
  }
}
</script>

<style lang="less">
  .settings-view{
    .settings-box{
      .setting-item{
        position: relative;
        border-bottom: 1px dashed #ccc;
        padding: 30px 30px 30px 0;
        &:first-child{
          padding-top: 0;
        }
        &:last-child{
          border-bottom: none;
        }
        .item-title{
          margin-bottom: 20px;
          color: #999;
          font-size: 18px;
          font-weight: 400;
        }
        .item-text{
          margin-top: 8px;
          a{
            color: #38B;
          }
        }
        .item-operation{
          margin-top: 8px;
        }
        .item-operation-toggle{
          .toggle-item{
            position: relative;
            padding: 15px 50px 15px 0;
            .el-switch{
              margin-left: 10px;
            }
          }
        }
      }
    }
  }
</style>
